import React, {Component} from 'react';

class Footer extends Component {
    render() {
        const data = this.props.data

        // 如果存在选择的项，就显示清除按钮
        let button
        if (this.countChecked() > 0) {
            button = <button
                className="btn btn-danger"
                onClick={this.handleCleanFinishAllTask}
            >清除已完成任务</button>
        }

        return (
            <div className="todo-footer">
                <label>
                    <input
                        type="checkbox"
                        checked={this.checkAllStatue()}
                        onChange={this.handleCheckAll}
                    />
                    已选择{this.countChecked()}项 / 合计{data.length}项
                </label>
                {button}
            </div>
        );
    }

    // 统计被勾选的数据
    countChecked = () => {
        const data = this.props.data
        return data.filter(item => item.done).length
    }

    // 计算全选框的状态
    checkAllStatue = () => {
        const data = this.props.data
        return data.length !== 0 && this.countChecked() === data.length
    }

    // 处理全选点击事件
    handleCheckAll = (event) => {
        this.props.checkAllTask(event.target.checked)
    }

    // 清除已完成的任务
    handleCleanFinishAllTask = () => {
        if(window.confirm("确认清除已完成的任务？")){
            this.props.cleanFinishAllTask()
        }
    }
}

export default Footer;
